<template>
  <div>
    <a-spin :spinning="!treeLoading"> </a-spin>
    <a-input-search
      placeholder="请输入人员名称"
      class="search"
      allowClear
      v-model="searchValue"
      @change="onChange"
      style="margin-bottom: 8px;"
    />
    <a-tree
      @expand="onExpand"
      @select="onSelect"
      @check="onCheck"
      :loading="true"
      checkable
      :checkStrictly="true"
      :defaultExpandAll="expandAllNode"
      :defaultExpandedKeys="[defaultdKeys]"
      :autoExpandParent="autoExpandParent"
      :expandedKeys="expandedKeys"
      :treeData="treeData"
      v-if="treeLoading && isRouterAlive"
    >
      <template slot="custom" slot-scope="record">
        <span v-if="record.title.indexOf(searchValue) > -1" style="display: flex; align-items: center;">
          {{ record.title.substr(0, record.title.indexOf(searchValue)) }}
          <span style="color: #f50">{{ searchValue }}</span>
          {{ record.title.substr(record.title.indexOf(searchValue) + searchValue.length) }}
          <!--//在线不在线-->
          <span
            v-if="record.sjskPersonId && record.isOnline && record.type == 9"
            :class="{ class1: record.isOnline == 1, class2: record.isOnline == 2 }"
          ></span>
        </span>
        <span v-else style="display: flex; align-items: center;">
          {{ record.title }}
          <!--//在线不在线-->
          <span
            v-if="record.sjskPersonId && record.isOnline && record.type == 9"
            :class="{ class1: record.isOnline == 1, class2: record.isOnline == 2 }"
          ></span>
        </span>
        <span class="lineColor" :id="record.value"></span>
      </template>
      <!-- <span slot="custom" slot-scope="record">
        <span>{{ record.title }}</span>
        <span class="lineColor" :id="record.value"></span>
      </span> -->
    </a-tree>
    <!-- <a-skeleton v-else active :paragraph="{ rows: 14 }" /> -->
  </div>
</template>

<script>
export default {
  name: 'SearchTree',
  props: {
    data: {
      type: Array,
      require: true
    },
    defaultdKeys: {
      type: String,
      require: false
    },
    isShowEllipsis: {
      type: Boolean,
      default: true
    },
    expandAllNode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchValue: '',
      expandedKeys: [],
      autoExpandParent: true,
      dataList: [],
      treeData: [],
      keys: '',
      selectedKeys: [],
      selectedTitles: [],
      loadingBool: false,
      phoneArr: [],
      flag: false,
      isRouterAlive: true
    }
  },
  computed: {
    treeLoading() {
      console.log(this.treeData)
      return this.treeData !== null && this.treeData.length > 0
    }
  },
  watch: {
    data: {
      handler(val, oldVal) {
        this.dataList = []
        if (val !== null) {
          this.generateList(val)
          this.treeData = val
          this.reload()
          if (this.treeData.length > 0) {
            // 展开第一个节点
            this.expandedKeys = [this.treeData[0].key]
          }
        }
      }
    },
    immediate: true
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  mounted() {},
  methods: {
    onSearch() {},
    getSelectedKey() {
      return this.selectedKeys[0] || ''
    },
    getSelectedKeys() {
      return this.selectedKeys
    },
    getSelectedTitle() {
      return this.selectedTitles[0] || ''
    },
    getSelectedTitles() {
      return this.selectedTitles
    },
    onCheck(checkedKeys, info) {
      this.$emit('checked', info)
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys
      if (this.selectedKeys.length > 0) {
        this.selectedTitles = info.selectedNodes.map(i => i.data.props.dataRef.title)
        this.keys = this.selectedTitles
        this.$emit('selected', this.selectedKeys, this.selectedTitles, info.selectedNodes[0].data.props.dataRef)
      }
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        // 不是叶子节点都不能勾选
        if (node.children && node.children !== null && node.children.length > 0) {
          node.disableCheckbox = true // 设置不可勾选后会生成类ant-tree-checkbox-disabled，则可以隐藏
          node.selectable = false // 选中无效
        } else {
          // 最底层区域，type为2是没人的居委会，9是人
          if (node.type == 2) {
            node.disableCheckbox = true
            node.selectable = false
          }
          //  else {
          // 最下层的叶子节点数据加上属性lastLeaf
          // if (node.scopedSlots === undefined) {
          //   node.scopedSlots = { title: "custom" };
          // }
          // }
        }
        if (node.scopedSlots === undefined) {
          node.scopedSlots = { title: 'custom' }
        }
        // 递归tree取到所有的key,parentId和title存入数组
        this.dataList.push({
          key: node.key,
          parentId: node.parentId,
          extendData: node.extendData,
          title: node.title
        })
        if (node.children) {
          this.generateList(node.children)
        }
      }
    },
    onChange(e) {
      const value = e.target.value
      if (value == '') {
        this.expandedKeys = [this.treeData[0].key]
        return
      }
      if (value) {
        // 遍历所有key和title数组
        this.dataList.map(item => {
          console.log(item.title, value)
          if (item.title.indexOf(value) > -1) {
            // if (item.title == value) {
            // 层级关系的key数组
            this.expandedKeys.push(item.key)
            // this.expandedKeys = item.extendData.substring(0, item.extendData.length - 1).split(',')
            // console.log(this.expandedKeys);
            // this.expandedKeys = [
            //   "20058062597660672",
            //   "20058062652186624",
            //   "20058063306498048"
            // ];
          }
        })
      }
    },
    drawInfoLine(arr) {
      // 如果之前画过，先清除之前画的线
      if (this.phoneArr.length > 0) {
        this.phoneArr.forEach((item, index) => {
          let doc = document.getElementById(item)
          if (doc.classList != undefined && doc.classList != null) {
            doc.classList.remove('lineColor1')
            doc.classList.remove('lineColor2')
            doc.classList.remove('lineColor3')
            doc.classList.remove('lineColor4')
            doc.classList.remove('lineColor5')
          }
        })
      }
      // 根据id（电话号码）添加颜色类名
      this.phoneArr = arr // 保存号码，以便下次查询的时候删除
      arr.forEach((item, index) => {
        let doc = document.getElementById(item)
        if (index == 0) {
          doc.classList.add('lineColor1')
        }
        if (index == 1) {
          doc.classList.add('lineColor2')
        }
        if (index == 2) {
          doc.classList.add('lineColor3')
        }
        if (index == 3) {
          doc.classList.add('lineColor4')
        }
        if (index == 4) {
          doc.classList.add('lineColor5')
        }
      })
    },
    // 刷新组件
    async reload() {
      this.isRouterAlive = false
      await this.$nextTick()
      this.isRouterAlive = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-tree li .ant-tree-node-content-wrapper {
  // width: 130px;
  // overflow: hidden;
  // text-overflow: ellipsis;
  color: #fff;
}
/deep/ .ant-tree li span.ant-tree-switcher .ant-tree-switcher-icon,
.ant-tree li span.ant-tree-switcher.ant-tree-switcher_open .ant-select-switcher-icon {
  color: #fff;
}
/deep/.ant-tree li span.ant-tree-switcher.ant-tree-switcher_close .ant-tree-switcher-icon {
  font-size: 20px;
}
/deep/.ant-tree li span.ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-icon {
  font-size: 20px;
}
/deep/.ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
  display: none;
}

/deep/ .ant-tree li {
  position: relative;
}
/deep/ .lineColor {
  position: absolute;
  right: 10px;
  top: 13px;
  height: 6px;
  width: 20px;
}
//勾选的选项紧邻的下一个兄弟span元素
/deep/.ant-tree li span.ant-tree-checkbox-checked + span .lineColor1 {
  // background-color: rgba(255, 62, 125, 1);
  background-color: #d91f1b;
}
/deep/.ant-tree li span.ant-tree-checkbox-checked + span .lineColor2 {
  background-color: #009dd9;
  // background-color: rgba(255, 62, 125, 1);
}
/deep/.ant-tree li span.ant-tree-checkbox-checked + span .lineColor3 {
  background-color: #48bb00;
  // background-color: rgba(255, 62, 125, 1);
}
/deep/.ant-tree li span.ant-tree-checkbox-checked + span .lineColor4 {
  background-color: #762bd0;
  // background-color: rgba(255, 62, 125, 1);
}
/deep/.ant-tree li span.ant-tree-checkbox-checked + span .lineColor5 {
  background-color: #1921b3;
  // background-color: rgba(255, 62, 125, 1);
}
/deep/ .search {
  margin-top: 0.926vh;
  color: #fff;

  .ant-input {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 0;
    // height: 4.63vh;
    border-radius: 0;
    font-size: 14px;
  }

  .ant-input-group-addon {
    width: 4.63vh;
    height: 4.63vh;
    border: 0;
    background-color: transparent;

    .ant-btn {
      background: rgba(0, 236, 255, 0.3);
      height: 4.63vh;
      border-radius: 0;
      border: 0;
      font-size: 2.222vh;
    }
  }
}
.class1 {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background-color: #53b824;
}
.class2 {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background-color: #b60000;
}
</style>
